<template>
  <div id="video-player" class="video-player"></div>
</template>
<script>
let Player
let progress
let volume
let pip
let flex
if (process.client) {
  Player = require('xgplayer/dist/simple_player');
  progress = require('xgplayer/dist/controls/progress')
  volume = require('xgplayer/dist/controls/volume')
  pip = require('xgplayer/dist/controls/pip')
  flex = require('xgplayer/dist/controls/flex')
}
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      player: null,
    }
  },
  mounted() {
    this.initPlayer()
  },
  watch: {
    url: {
      handler() {
        if (!this.player) {
          this.initPlayer()
          return
        }
        this.player.src = this.url
      }
    }
  },
  destroyed() {
    this.player.destroy({
      isDelDom: false
    })
  },
  methods: {
    initPlayer() {
      if (!this.url) return console.warn('url is not esist')
      const player = new Player({
        id: 'video-player',
        url: this.url,
        autoplay: true,
        loop: true,
        lang: 'zh-cn',
        fitVideoSize: 'auto',
        controlPlugins: [
          progress,
          volume,
          pip,
          flex,
        ],
        pip: true
      })
      if (player) {
        this.player = player
      }
    },
  }
}
</script>
<style scoped>
.video-player {
  width: 100% !important;
  height: 100% !important;
}
</style>


